<style>
#sectionNowrap span.error{
	position: absolute !important;
	left: 215px;
	top:0px;
}
#sectionNum span.error{
	position: absolute !important;
	left: 145px;
	top:0px;
}
</style>
<div class="pageContent">
	<form method="post" id="screenFrom" name="screenFrom"  action="${rc.getContextPath()}/manage/screen/saveScreen" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone);">
		<div class="pageFormContent">
			<input type="hidden" name="navTabId" value="${navTabId!''}"> 
			<input type="hidden" name="id" <#if pattern=='modify'>value="${screen.screenCode!''}"</#if>">
			<p>
				<label><@label key="businessType.C,colon">业务类型:</@label></label>
				<select name="businessType">
					<#list businessTypes as type>
					<option value="${type.businessType}"<#if type.businessType?? && type.businessType == screen.businessType> selected="selected"</#if>>${type.businessType}-${type.businessTypeText}</option> 
					</#list>
				</select>
			</p>
			<p></p>
			<p>
				<label><@label key="screenCode.C,colon">界面编号:</@label></label>
				<input name="screenCode" size="22" type="text" maxlength="20" class="required alphanumeric toUp" 
				remote="${rc.getContextPath()}/manage/screen/validateScreen" warn="<@label key='screenCode.C,AlreadyExists.C'>界面编号已经存在</@label>" value="${screen.screenCode!''}" />
			</p>
			<p>
				<label><@label key="screenText.C,colon">界面描述:</@label></label>
				<input name="screenText" size="22" type="text" maxlength="50" class="required" value="${screen.screenText!''}" />
			</p>
		</div>
        <div class="unitBox" style=" margin-top:10px;float: left; display: block; overflow: hidden; width: 50%; background: #fff;border-bottom: 1px #d8dfe5 solid;border-left: 1px #d8dfe5 solid;border-right: 1px #d8dfe5 solid" >
            <div class="panelBar">
                <ul class="toolBar">
                    <li><a class="add" onclick="screenJs.addSectionTr();"> <span><@label key="add.B">新增</@label></span></a></li>                    
                    <li><a class="delete" onclick="screenJs.deleteSection();"> <span><@label key="delete.B">删除</@label></span></a></li>
                    <li><a class="up" onclick="screenJs.upSectionTr();"> <span><@label key="up.B">上移</@label></span></a></li>
                    <li><a class="down" onclick="screenJs.downSectionTr();"> <span><@label key="down.B">下移</@label></span></a></li>
                </ul>
            </div>
            <table id="sectionTable" class="table" style="width: 100%;" layoutH="185">
                <thead>
                    <tr>
                        <th width="20"><input type="checkbox" name="sectionCB" group="sectionCodes" class="checkboxCtrl"></th>
                        <th width="60"><@label key="section.C">版块</@label></th>
                        <th width="70"><@label key="sectionText.C">版块描述</@label></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="unitBox" style=" margin-top:10px;float: right; display: block; overflow: hidden; width: 49%;background: #fff; border-bottom: 1px #d8dfe5 solid;border-left: 1px #d8dfe5 solid;border-right: 1px #d8dfe5 solid">
        	<div class="panelBar">
                <ul class="toolBar">
                    <li><a class="add" onclick="screenFieldJs.addScreenField();"> <span><@label key="add.B">新增</@label></span></a></li>                    
                    <li><a class="delete" onclick="screenFieldJs.deleteScreenField();"> <span><@label key="delete.B">删除</@label></span></a></li>
                    <li><a class="up" onclick="screenFieldJs.upScreenField();"> <span><@label key="up.B">上移</@label></span></a></li>
                    <li><a class="down" onclick="screenFieldJs.downScreenField();"> <span><@label key="down.B">下移</@label></span></a></li>
                </ul>
            </div>
            <input type="hidden" name="businessfields"> 
            <table id="screenFieldTable" class="table" style="width: 100%;" layoutH="185">
                <thead>
                    <tr>
                        <th width="20"><input type="checkbox" name="screenFieldCB" group="fieldOrdinal" class="checkboxCtrl"></th>
                        <th width="55"><@label key="businessField.C">业务字段</@label></th>
                        <th width="55"><@label key="businessFieldText.C">业务字段描述</@label></th>
                        <th width="20"><@label key="readonlyFlag.C">只读</@label></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>		
		<div class="formBar">
			<ul>
				<li>
					<div class="buttonActive">
						<div class="buttonContent">
							<button type="button" onclick='screenSubmitJs.screenSubmit();'><@label key="save.B">保存</@label></button>
						</div>
					</div>
				</li>
				<li>
					<div class="buttonActiveGrey">
						<div class="buttonContent">
							<button type="button" class="close"><@label key="cancel.B">取消</@label></button>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</form>
</div>
<script>	
	$(function() {
		
	});
	var $page = DWZ.context(),sectionMap = new Map(),row = 0,businessfields="",onClickSection="";
	var fieldMap,section,screenField;
	var $form =$("#screenFrom", $page);
	var screenSubmitJs = {
		screenSubmit: function(){	
			var $form =$("#screenFrom", $page);
			if (!$form.valid()) {				
				return;
            }; 
			if(sectionMap.size()==0){				
				alertMsg.error("<@label key='sectionNot.M'>请先填写版块信息！</@label>");
                return false;
			}				
			screenJs.addSectionToMap();
			var keys = sectionMap.keys();
			for(var i=0; i<keys.length; i++){
				var qsection =sectionMap.get(keys[i]);
				var qsectionCode=qsection.sectionCode;
				for(var j=0; j<keys.length; j++){					
					if(i!=j){
						var section =sectionMap.get(keys[j]);
						if(qsectionCode==section.sectionCode){
							alertMsg.error("<@label key='sectionCode.M'>版块名称重复！</@label>");
			                return false;
						};
					};					
				}
			};
			$.DWZajax({
                url:hostUrl +"/screen/saveScreen",
                data:{
                	'navTabId':$("input[name='navTabId']",$page).val(),
                	'sectionMap':JSON.stringify(sectionMap),
                	'screenCode':$("input[name='screenCode']",$page).val(),
                	'screenText':$("input[name='screenText']",$page).val(),
                	'businessType':$("select[name='businessType']",$page).val()},
                callback:function(data){
                	if(!data){
                		alertMsg.error(data);
                	}
                	$.pdialog.closeCurrent();
                	alertMsg.correct("<@label key='successfulOperation.M'>操作成功</@label>");
                	navTab.reload(hostUrl + "/screen/screenList?navTabId=${navTabId!''}");
                }
            });           
		}
	};
	var screenFieldJs = {
		addScreenField: function(){
			screenJs.addSectionToMap();
			if(onClickSection==""){
				alertMsg.error("<@label key='sectionSelectNot.M'>请先选择版块！</@label>");
				return false;
			};
			businessfields=businessfields.replace(",,",",");
			if(businessfields.charAt(0)==","){
				businessfields=businessfields.substr(1);
			};
			if(businessfields.charAt(businessfields.length-1)==","){
				businessfields=businessfields.substr(0,businessfields.length-1);
			};
			var businessfieldArr= new Array(); 		
			businessfieldArr=businessfields.split(",");
			var businessType = $("select[name='businessType']",$page).val();
			path = hostUrl+ "/screen/getOnBusinessField?businessfields="+businessfieldArr+"&businessType="+businessType,
			title = "新增业务字段";
			$.pdialog.open(path, '', title, {
				width : 460,
				height :320,
				minable : false,
				mask : true,
				resizable : false
			});
		},
		addScreenFieldToTr: function(){
			var section = sectionMap.get(onClickSection);
			fieldMap = section.screenFields;
			$("#screenFieldTable .gridTbody", $page).find("table tbody").html("");
			var keys = fieldMap.keys();
			for(var i=1; i<=keys.length; i++){
				var screenField = fieldMap.get(i);
				var gridTheadTh = $("#screenFieldTable", $page).find("table thead th");
				var tr = "<tr id='"+screenField.fieldOrdinal+"'>";
				tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div><input name='fieldOrdinal' value='"+screenField.fieldOrdinal+"' type='checkbox'></div></td>";
				if(screenField.businessField!=""){
					tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>"+screenField.businessField+"</div></td>";
					tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div>"+(screenField.businessFieldText || '')+"</div></td>";
				}else{
					tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div>（占位符）</div></td>";
					tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div>（占位符）</div></td>";
				};
				if(screenField.readonlyFlag==1){
					tr += "<td style='width:"+$(gridTheadTh[3]).width()+"px'><div><input name='readonlyFlag'  onchange='screenFieldJs._showCheckedBox(this);' value='"+screenField.fieldOrdinal+"' checked='true' type='checkbox'/></div></td>";
				}else{
					tr += "<td style='width:"+$(gridTheadTh[3]).width()+"px'><div><input name='readonlyFlag' onchange='screenFieldJs._showCheckedBox(this);' value='"+screenField.fieldOrdinal+"' type='checkbox'/></div></td>";
				};				
				$("#screenFieldTable .gridTbody", $page).find("table tbody").append(tr);	
			};
		},
		_showCheckedBox: function(_this){
			var readonlyFlagVal = $(_this).val();
			var section = sectionMap.get(onClickSection);
			fieldMap = section.screenFields;
			var screenField = fieldMap.get(readonlyFlagVal);
			if($(_this).attr('checked')){				
				screenField.readonlyFlag=1;
			}else{
				screenField.readonlyFlag=0;
			};
		},
		upScreenField: function(){
			$("input[name='screenFieldCB']",$page).attr("checked", false);
			var section = sectionMap.get(onClickSection);
			fieldMap = section.screenFields;		
			$('#screenFieldTable').find("tbody tr").each(function(){	
				var tds=$(this).find('td');
				if(tds.eq(0).find("input").attr("checked")){
					var fieldRow = tds.eq(0).find("input").val();					
					if(fieldRow!=1){
						var oldScreenField = fieldMap.get(fieldRow);
						oldScreenField.fieldOrdinal=parseInt(fieldRow)-1;
						var newScreenField = fieldMap.get(fieldRow-1);
						newScreenField.fieldOrdinal=parseInt(fieldRow);
						fieldMap.put(fieldRow,newScreenField);
						fieldMap.put(fieldRow-1,oldScreenField);
					};
				};
		    });
			screenFieldJs.addScreenFieldToTr();
		},
		downScreenField: function(){
			$("input[name='screenFieldCB']",$page).attr("checked", false);
			var section = sectionMap.get(onClickSection);
			fieldMap = section.screenFields;		
			var downArray = [];
			$('#screenFieldTable').find("tbody tr").each(function(){	
				var tds=$(this).find('td');
				if(tds.eq(0).find("input").attr("checked")){
					var fieldRow = tds.eq(0).find("input").val();	
					downArray.push(parseInt(fieldRow));	
					
				};
		    });	
			for(var i=downArray.length-1; i>=0; i--){
				var downRow = downArray[i];
				if(downRow!=fieldMap.size()){					
					var oldScreenField = fieldMap.get(downRow);
					oldScreenField.fieldOrdinal=parseInt(downRow)+1;
					var newScreenField = fieldMap.get(parseInt(downRow)+1);
					newScreenField.fieldOrdinal=parseInt(downRow);
					fieldMap.put(downRow,newScreenField);
					fieldMap.put(parseInt(downRow)+1,oldScreenField);
				}				
			}		
			screenFieldJs.addScreenFieldToTr();
		},
		deleteScreenField: function(){			
			var section = sectionMap.get(onClickSection);
			fieldMap = section.screenFields;
			var clearArray =[];
			$('#screenFieldTable').find("tbody tr").each(function(){	
				var tds=$(this).find('td');
				if(tds.eq(0).find("input").attr("checked")){
					var fieldRow = tds.eq(0).find("input").val();	
					clearArray.push(fieldRow);
					var delbusinessfield = tds.eq(1).text();
					businessfields=businessfields.replace(delbusinessfield,"");
					businessfields=businessfields.replace(",,",",");
					if(businessfields.charAt(0)==","){
						businessfields=businessfields.substr(1);
					};
					if(businessfields.charAt(businessfields.length-1)==","){
						businessfields=businessfields.substr(0,businessfields.length-1);
					};
				};
		    });
			for(var i=0; i<clearArray.length; i++){
				var removeRow=clearArray[i]-i;
				var maxRow=fieldMap.keys().length;
				fieldMap.remove(removeRow);
				for(var j=removeRow; j<maxRow; j++){
					var oldScreenField = fieldMap.get(parseInt(j)+1);
					oldScreenField.fieldOrdinal=parseInt(j);
					fieldMap.put(j,oldScreenField);
					fieldMap.remove(parseInt(j)+1);
				};
			};
			screenFieldJs.addScreenFieldToTr();
		}
	};
	var screenJs = {
		_showClickSection: function(_this){
			onClickSection=$(_this).attr("id");
			screenFieldJs.addScreenFieldToTr();
		},
		addSectionTr: function() {
			row++;
			section = new Object();
			fieldMap = new Map();
			section.sectionOrdinal=row;
			section.screenFields=fieldMap;
			sectionMap.put(row,section);
			var gridTheadTh = $("#sectionTable", $page).find("table thead th");
			var tr = "<tr id='"+row+"' onclick='screenJs._showClickSection(this);' >";
			tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div><input name='sectionCodes' value='"+row+"' type='checkbox'></div></td>";
			tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div id='sectionNowrap'><input name='sectionCode"+row+"'  type='text' class='required alphanumeric toUp textInput valid' style='width:110px;height:18px;' maxlength='30'/></div></td>";
			tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div id='sectionNum'><input name='sectionText"+row+"'  type='text' class='required textInput valid' style='width:130px;height:18px;' maxlength='58'/></div></td>";
			$("#sectionTable .gridTbody", $page).find("table tbody").append(tr);		
		},
		addSectionToMap: function(){			
			var keys = sectionMap.keys();
			for(var i=0; i<keys.length; i++){
				var section =sectionMap.get(keys[i]);				
				section.sectionCode=$("input[name='sectionCode"+keys[i]+"']",$page).val().toUpperCase();
				section.sectionText=$("input[name='sectionText"+keys[i]+"']",$page).val();
			}
		},
		addSectionMapToTab: function(){
			$("#sectionTable .gridTbody", $page).find("table tbody").html("");
			for(var i=1; i<=row; i++){
				var sectionvar = sectionMap.get(i);
				var gridTheadTh = $("#sectionTable", $page).find("table thead th");
				var tr = "<tr id='"+i+"' onclick='screenJs._showClickSection(this);'>";
				tr += "<td style='width:"+$(gridTheadTh[0]).width()+"px'><div><input name='sectionCodes' value='"+i+"' type='checkbox'></div></td>";
				tr += "<td style='width:"+$(gridTheadTh[1]).width()+"px'><div id='sectionNowrap'><input name='sectionCode"+i+"' value='"+sectionvar.sectionCode+"'  type='text' class='required alphanumeric toUp textInput valid' style='width:110px;height:18px;' maxlength='30'/></div></td>";
				tr += "<td style='width:"+$(gridTheadTh[2]).width()+"px'><div id='sectionNum'><input name='sectionText"+i+"' value='"+sectionvar.sectionText+"' type='text' class='required textInput valid' style='width:130px;height:18px;' maxlength='58'/></div></td>";
				$("#sectionTable .gridTbody", $page).find("table tbody").append(tr);	
			};
		},
		upSectionTr: function(){
			screenJs.addSectionToMap();
			$("input[name='sectionCB']",$page).attr("checked", false);
			$('#sectionTable').find("tbody tr").each(function(){	
				var tds=$(this).find('td');
				if(tds.eq(0).find("input").attr("checked")){
					var sectionRow = tds.eq(0).find("input").val();
					if(sectionRow!=1){
						var oldSection = sectionMap.get(sectionRow);
						oldSection.sectionOrdinal=parseInt(sectionRow-1);
						var newSection = sectionMap.get(sectionRow-1);
						newSection.sectionOrdinal=parseInt(sectionRow);
						sectionMap.put(sectionRow,newSection);
						sectionMap.put(sectionRow-1,oldSection);
					};					
				};
		    });
			screenJs.addSectionMapToTab();
		},
		downSectionTr: function(){
			screenJs.addSectionToMap();
			$("input[name='sectionCB']",$page).attr("checked", false);
			var downArray = [];
			$('#sectionTable').find("tbody tr").each(function(){	
				var tds=$(this).find('td');				
				if(tds.eq(0).find("input").attr("checked")){
					var sectionRow = tds.eq(0).find("input").val();
					downArray.push(parseInt(sectionRow));									
				};
		    });
			for(var i=downArray.length-1; i>=0; i--){
				var downRow = downArray[i];
				if(downRow!=sectionMap.size()){
					var oldSection = sectionMap.get(downRow);
					oldSection.sectionOrdinal=parseInt(downRow)+1;
					var newSection = sectionMap.get(parseInt(downRow)+1);
					newSection.sectionOrdinal=parseInt(downRow);
					sectionMap.put(downRow,newSection);
					sectionMap.put(parseInt(downRow)+1,oldSection);
				}				
			}
			screenJs.addSectionMapToTab();
		},
		deleteSection: function(){
			screenJs.addSectionToMap();
			$("#screenFieldTable .gridTbody", $page).find("table tbody").html("");	
			var clearArray =[];
			$('#sectionTable').find("tbody tr").each(function(){	
				var tds=$(this).find('td');
				if(tds.eq(0).find("input").attr("checked")){
					var sectionRow = tds.eq(0).find("input").val();
					clearArray.push(sectionRow);
				};
		    });			
			for(var i=0; i<clearArray.length; i++){
				var removeRow=clearArray[i]-i;
				var maxRow=sectionMap.keys().length;
				var section = sectionMap.get(removeRow);				
				var fieldMap = section.screenFields;
				var keys = fieldMap.keys();
				for(var k=1; k<=keys.length; k++){
					var screenField = fieldMap.get(k);
					var delbusinessfield=screenField.businessField;
					if(delbusinessfield!=null){
						businessfields=businessfields.replace(delbusinessfield,"");
						businessfields=businessfields.replace(",,",",");
						if(businessfields.charAt(0)==","){
							businessfields=businessfields.substr(1);
						};
						if(businessfields.charAt(businessfields.length-1)==","){
							businessfields=businessfields.substr(0,businessfields.length-1);
						};
					};
				};
				sectionMap.remove(removeRow);
				for(var j=removeRow; j<maxRow; j++){
					var oldSection = sectionMap.get(parseInt(j)+1);
					oldSection.sectionOrdinal=parseInt(j);
					sectionMap.put(j,oldSection);
					sectionMap.remove(parseInt(j)+1);
				};
				row--;
			};			
			screenJs.addSectionMapToTab();			
		}
	};
	function _onBusinessFieldCallback(data,text) {
		if(businessfields==""){
			businessfields = data;
		}else{
			businessfields = businessfields +","+data;
		}		
		var section = sectionMap.get(onClickSection);
		fieldMap = section.screenFields;
		if(data!=","){
			var businessfieldArr= new Array(); 		
			businessfieldArr=data.split(","); 	
			businessfieldTextArr=text.split(","); 	
			for (var i=0;i<businessfieldArr.length;i++){ 			
				var row = parseInt(fieldMap.keys().length)+1; 
				screenField = new Object();
				screenField.businessField=businessfieldArr[i];
				screenField.businessFieldText=businessfieldTextArr[i];
				screenField.readonlyFlag=0;
				screenField.fieldOrdinal=row;
				fieldMap.put(row,screenField);
			};
		}else{
			var row = parseInt(fieldMap.keys().length)+1; 
			screenField = new Object();
			screenField.businessField="";
			screenField.businessFieldText=null;
			screenField.readonlyFlag=0;
			screenField.fieldOrdinal=row;
			fieldMap.put(row,screenField);
		};		
		section.screenFields=fieldMap;
		sectionMap.put(onClickSection,section);
		screenFieldJs.addScreenFieldToTr();
	};
</script>
